<p>staff works!</p>
<h1>Staff</h1>
<table mat-table #stafftable [dataSource]="dataSource" class="mat-elevation-z8"> 
    <ng-container matColumnDef="staffId">
        <th mat-header-cell *matHeaderCellDef> staffId </th>
        <td mat-cell *matCellDef="let element"> {{element.staffId}} </td>
    </ng-container>
    <ng-container matColumnDef="staffName">
        <th mat-header-cell *matHeaderCellDef> staffName </th>
        <td mat-cell *matCellDef="let element"> {{element.staffName}} </td>
    </ng-container>
    <ng-container matColumnDef="staffAge">
        <th mat-header-cell *matHeaderCellDef> staffAge </th>
        <td mat-cell *matCellDef="let element"> {{element.staffAge}} </td>
    </ng-container>
    <ng-container matColumnDef="staffGender">
        <th mat-header-cell *matHeaderCellDef> staffGender </th>
        <td mat-cell *matCellDef="let element"> {{element.staffGender==true?'man':'woman'}} </td>
    </ng-container>
    <ng-container matColumnDef="staffInTime">
        <th mat-header-cell *matHeaderCellDef> staffInTime </th>
        <td mat-cell *matCellDef="let element"> {{element.staffInTime}} </td>
    </ng-container>
    <ng-container matColumnDef="operations">
        <th mat-header-cell *matHeaderCellDef>operations </th>
        <td mat-cell *matCellDef="let element"> <button mat-button (click)="Btn_Edit(element.staffId)">Edit</button>&nbsp;&nbsp;&nbsp;<button mat-button (click)="Btn_Delete(element.staffId)">Delete</button> </td>
    </ng-container>
    
    
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator  [pageSizeOptions]="[5,10,20 ]" showFirstLastButtons=""></mat-paginator> 